<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
  <title>泡泡侠首页----按件洗</title>
  <link rel="stylesheet" href="css/app.css">
  <script type="text/javascript">
        (function (doc, win) {
          var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
              var clientWidth = docEl.clientWidth;
              if (!clientWidth) return;
              docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
            };
         
          if (!doc.addEventListener) return;
          win.addEventListener(resizeEvt, recalc, false);
          doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>
  <base target="_blank"></head>
<body>
<section id="wrapper">
  
  
  <section id="header" pp_name="悬浮页头">
    <div class="header header_jmb">
      <a href="#" class="l on"><span >按件洗</span></a>
      <a href="#" class="m "><span >包月洗</span></a>
      <a href="#" class="r "><span >称重洗</span></a>
    </div>
  </section>
  <section id="jmb_body">
    <div class="jmb_body">
      <div class="nav" >
        <ul id="jmb_nav">
          <li class="on">9元一件</li>
          <li>19元一件</li>
          <li>29元一件</li>
          <li>69元一件</li>
          <li>99元一袋</li>
        </ul>
      </div>
      <div class="tab tab_a" >
        <div class="type" id="type9">
          <img src="images/type9_1.jpg" alt="">
          <img src="images/type9_2.jpg" alt="">
        </div>
        <div class="type" id="type19">
          <img src="images/type19_1.jpg" alt="">
          <img src="images/type19_2.jpg" alt="">
        </div>
        <div class="type" id="type29">
          <img src="images/type29_1.jpg" alt="">
        </div>
        <div class="type" id="type69">
          <img src="images/type69_1.jpg" alt="">
        </div>
        <div class="type" id="type99">
                </div>
        <div class="clear"></div>
      </div>
      
      
      
    </div>
  </section> 
  <section id="footer" pp_name="悬浮页脚">
    <div class="footer">
      <a href="#" class="l on"><span >洗衣</span></a>
      <a href="#" class="m "><span >订单</span></a>
      <a href="#" class="r "><span >个人</span></a>
    </div>
  </section>
</section>
<script src="js/jquery-1.10.1.min.js"></script>
<script>


 
 
$(document).ready(function(){

          var arr_navheight_down=[];
          arr_navheight_down[0]=$(".footer").offset().top;
          arr_navheight_down[1]=$("#type19").offset().top-arr_navheight_down[0];
          arr_navheight_down[2]=$("#type29").offset().top-arr_navheight_down[0];
          arr_navheight_down[3]=$("#type69").offset().top-arr_navheight_down[0];
          arr_navheight_down[4]=$("#type99").offset().top-arr_navheight_down[0];
          var arr_navheight_up=[];
          arr_navheight_up[0]=$(".footer").offset().top;
          arr_navheight_up[1]=$("#type19").offset().top-arr_navheight_up[0];
          arr_navheight_up[2]=$("#type29").offset().top-arr_navheight_up[0];
          arr_navheight_up[3]=$("#type69").offset().top-arr_navheight_up[0];
          arr_navheight_up[4]=$("#type99").offset().top-arr_navheight_up[0];
        $("#jmb_nav li").click(function(){


            var _index=$(this).index();
             navClassSet(_index);
            switch(_index)
            {
            case 0:
             HoverTreeScroll( $("#type9"),_index);
              break;
            case 1:
              HoverTreeScroll($("#type19"),_index);
              break;
              ;
            case 2:
              HoverTreeScroll($("#type29"),_index);
              break;
              ;
            case 3:
              HoverTreeScroll($("#type69"),_index);
              break;
              ;
            case 4:
              HoverTreeScroll($("#type99"),_index);
              break;
              ;
            }
           
        });
        function windowScroll2(){
            
              var _h=$(window).scrollTop();
              // console.log(_h,
              //   arr_navheight_down[0],
              //   arr_navheight_down[1],
              //   arr_navheight_down[2],
              //   arr_navheight_down[3],
              //   arr_navheight_down[4],
              //   "up");
               switch(true)
              {
              case 0<_h&&_h<arr_navheight_down[1]:
               navClassSet(0);
                break;
              case arr_navheight_down[1]<_h&&_h<arr_navheight_down[2]:
               navClassSet(1);
                break;           
               case arr_navheight_down[2]<_h&&_h<arr_navheight_down[3]:
                navClassSet(2);
                break;
                ;
              case arr_navheight_down[3]<_h&&_h<arr_navheight_down[4]:
                navClassSet(3);
                break;
              case _h>arr_navheight_down[4]:
                navClassSet(4);
                break;
                ;
              }
          }
        function windowScroll1(){
            $(window).scroll(function(event){
              var _h=$(window).scrollTop();
              var _vh=$(window).height();
             // console.log(_h,arr_navheight_down,"down");
               switch(true)
              {
              case arr_navheight_down[1]<_h&&_h<arr_navheight_down[2]:
               navClassSet(1);
                break;
              case arr_navheight_down[2]<_h&&_h<arr_navheight_down[3]:
               navClassSet(2);
                break;           
               case arr_navheight_down[3]<_h&&_h<arr_navheight_down[4] :
                navClassSet(3);
               break;
                ;
              case arr_navheight_down[4]<_h:
                navClassSet(4);
                break;
                ;
              }
            });
          }
          function navClassSet(i){
             $("#jmb_nav li").eq(i).siblings(".on").removeClass("on");
             $("#jmb_nav li").eq(i).addClass("on");
          }
         function HoverTreeScroll(el,index) {
          var scroll_offset = $(el).offset();
          var header_top=$("#type9").offset().top;
          var _newtop=scroll_offset.top-header_top*1;
          // console.log(scroll_offset.top);
          $("body,html").stop().animate({ 
          scrollTop:_newtop},1000); 
      }
      var yy,YY,swipeY ;
         document.addEventListener('touchstart',function(event){
             yy = event.targetTouches[0].screenY ;
             swipeY = true ;
         })
         document.addEventListener('touchmove',function(event){    
              YY = event.targetTouches[0].screenY ;
            if(YY-yy>0){
              // console.log("向上滑");
              windowScroll2();
            }else{
               // console.log("向下滑");
               windowScroll1();
            }
          })








});
</script>
</body>
</html>